<!-- 设备详情页 -->
<template>
	<view class="detail-container">
		<!-- <view class="title">设备详情</view> -->

		<!-- 设备信息区 -->
		<view class="row">
			<text>设备名称：</text>
			<text class="device-name">{{ alarmName }}</text>

			<!-- 在设备名称后面加一个小提示文字，可点击修改 -->
			<text class="change-name-text" @click="onShowNameEditPopup">
				（修改名称）
			</text>
		</view>

		<!-- 修改名称弹框 -->
		<view v-if="showNameEditPopup" class="name-edit-popup">
			<view class="name-edit-popup-content">
				<view class="popup-title">修改设备名称</view>

				<!-- 输入框，绑定 newAlarmName -->
				<input class="name-input" v-model="newAlarmName" placeholder="请输入新的设备名称" maxlength="30" />

				<!-- 弹框底部按钮 -->
				<view class="popup-actions">
					<button @click="onCancelNameEdit">取消</button>
					<button @click="onConfirmNameEdit">确定</button>
				</view>
			</view>
		</view>

		<!-- 设备端可以拿到IP城市，所以不需要手动选择地区 -->
		<!-- <view class="row"> -->
		<!-- <text>设备定位：</text> -->
		<!-- 城市选择picker -->
		<!-- <picker mode="region" :value="regionValue" custom-item="请点击此处选择" @change="onRegionChange"> -->
		<!-- 用一个 <view> 来展示当前选中的省市区 -->
		<!-- <view class="city-picker-text"> {{ regionValue.length > 0 ? regionValue.join(' ') : '请选择' }} </view> -->
		<!-- </picker> -->
		<!-- </view> -->

		<!-- 灯光开关 -->
		<view class="row">
			<text>灯光开关：</text>
			<!-- :checked 绑定当前状态，@change 更新状态 -->
			<switch :checked="lightOn" @change="onLightOnChange" />
		</view>

		<!-- 整点播报开关 -->
		<view class="row">
			<text>整点播报：</text>
			<switch :checked="reportOn" @change="onReportOnChange" />
		</view>

		<!-- 未知开关1 -->
		<!-- <view class="row">
			<text>未知开关1：</text>
			<switch :checked="relay1On" @change="onRelay1OnChange" />
		</view> -->

		<!-- 未知开关2 -->
		<!-- <view class="row">
			<text>未知开关2：</text>
			<switch :checked="relay2On" @change="onRelay2OnChange" />
		</view> -->

		<!-- 未知开关3 -->
		<!-- <view class="row">
			<text>未知开关3：</text>
			<switch :checked="relay3On" @change="onRelay3OnChange" />
		</view> -->

		<!-- 电源开关 -->
		<view class="row">
			<text>电源开关：</text>
			<text class="power-text">
				左
			</text>
			<switch :checked="powerLeftOn" @change="onPowerLeftOnChange" />
			<text class="power-text">
				右
			</text>
			<switch :checked="powerRightOn" @change="onPowerRightOnChange" />
		</view>

		<!-- ② 亮度设置（0-100），使用 Slider -->
		<view class="row">
			<text>亮度 ({{ brightness }}%)</text>
			<slider min="0" max="100" :value="brightness" @change="onBrightnessChange"
				style="margin-left: 10px; flex:1;" />
		</view>

		<!-- 三原色滑杆示例 -->
		<!-- 第1行：颜色设置 + 颜色预览在右上角的小圆形 -->
		<view class="color-setting-header">
			<text class="color-setting-title">颜色设置</text>
			<!-- <text class="change-name-text">
				（颜色预览）
			</text> -->
			<view class="preview-circle" :style="{ backgroundColor: currentColor }"></view>
		</view>

		<!-- 第2行：红色圆形 + slider -->
		<view class="rgb-slider-row">
			<!-- 左侧圆形色块 (红色) -->
			<view class="color-dot" style="background-color: #FF0000;" />
			<!-- slider -->
			<slider :value="redValue" min="0" max="255" @change="onRedChange" style="flex:1;" />
		</view>

		<!-- 第3行：绿色圆形 + slider -->
		<view class="rgb-slider-row">
			<view class="color-dot" style="background-color: #00FF00;" />
			<slider :value="greenValue" min="0" max="255" @change="onGreenChange" style="flex:1;" />
		</view>

		<!-- 第4行：蓝色圆形 + slider -->
		<view class="rgb-slider-row">
			<view class="color-dot" style="background-color: #0000FF;" />
			<slider :value="blueValue" min="0" max="255" @change="onBlueChange" style="flex:1;" />
		</view>

		<!-- ④ 闹钟时间列表：右上角一个蓝色加号，点击弹框添加 -->
		<view class="alarm-time-header">
			<text class="alarm-time-title">闹钟时间设置</text>
			<!-- <text class="alarm-time-add" @click="onAddAlarmTime">＋</text> -->
		</view>

		<view v-for="(timeItem, i) in alarmTimes" :key="i" class="alarm-time-row">
			<view class="alarm-time-info">
				<text>{{ timeItem.time }}</text>
				<text class="alarm-time-label">闹钟是否开启</text>
			</view>
			<switch :checked="timeItem.enabled" @change="onTimeEnabledChange(i, $event)" class="small-switch" />
			<!-- 在设备名称后面加一个小提示文字，可点击修改 -->
			<text class="detail-text" @click="onAddAlarmTime(i)">
				修改时间
			</text>
		</view>

		<!-- ⑤ 去掉“保存配置”按钮，因为一切操作实时调用后端 -->
		<!-- <button class="save-btn" @click="onSaveConfig">保存配置</button> -->

		<!-- 添加时间时的弹框，使用 <view v-if="showTimePopup"> 作为示例 -->
		<view v-if="showTimePopup" class="time-popup">
			<view class="time-popup-content">
				<view class="popup-title">添加闹钟时间</view>

				<!-- 这里可以使用 picker mode="time" 也可以手动输入 -->
				<picker mode="time" :value="tempTime" @change="onTimeChange">
					<view class="time-picker">{{ tempTime }}</view>
				</picker>

				<view class="popup-actions">
					<button @click="onCancelAddTime">取消</button>
					<button @click="onConfirmAddTime">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getClockDetail,
		editClock,
		editClockName,
		lightSwitch,
		hourlyBroadcastSwitch,
		colorSetting,
		brightnessSetting,
		setAlarmTime,
		relay1Switch,
		relay2Switch,
		relay3Switch,
		powerSwitchLeft,
		powerSwitchRight,
		storeClockAddress
	} from '@/src/api/clock.js'
	export default {
		data() {
			return {
				openid: getApp().globalData.openid || uni.getStorageSync("openid"),
				alarmId: '',
				alarmName: '我的设备',
				showNameEditPopup: false, // 控制名称修改弹框
				newAlarmName: '', // 存放用户输入的新名称
				lightOn: false,
				reportOn: false,
				// 亮度
				brightness: 50,
				// 三原色数值
				redValue: 255,
				greenValue: 255,
				blueValue: 255,
				// 计算得来的颜色 #RRGGBB
				currentColor: '#0000FF',
				// 闹钟时间列表
				alarmTimes: [{
					time: '',
					enabled: false
				}],
				relay1On: false,
				relay2On: false,
				relay3On: false,
				powerLeftOn: false,
				powerRightOn: false,
				// 控制添加时间的弹框
				showTimePopup: false,
				editingTimeIndex: null, // 初始化当前操作的闹钟索引
				tempTime: '07:00', // 临时选择的时间
				address: '北京', // 闹钟地址，默认北京
				regionValue: [] // 存储 [省, 市, 区]，初次为空数组
			}
		},
		async onLoad(options) {
			const alarmId = options.alarmId
			this.alarmId = alarmId
			console.log('设备详情页, alarmId =', alarmId)
			// 根据 alarmId 从本地或后端获取闹钟信息，然后填充 data
			const clockDetailResponse = await getClockDetail(alarmId)
			console.log("闹钟详情接口返回： ", clockDetailResponse)
			const detail = clockDetailResponse.data
			console.log("闹钟详情： ", detail)
			this.alarmName = detail.clockName
			this.lightOn = detail.lightSwitch == 1
			this.reportOn = detail.hourlyBroadcastSwitch == 1
			this.brightness = detail.brightnessSetting
			this.currentColor = '#' + detail.colorSetting
			this.alarmTimes = detail.setAlarmTime
			this.address = detail.address
			this.relay1On = detail.relay1Switch == 1
			this.relay2On = detail.relay2Switch == 1
			this.relay3On = detail.relay3Switch == 1
			this.powerLeftOn = detail.powerSwitchLeft == 1
			this.powerRightOn = detail.powerSwitchRight == 1

			// 解析 detail.colorSetting => R=128, G=192, B=255
			this.parseColorToRGB('#' + detail.colorSetting)
		},
		methods: {
			// 1. 显示名称修改弹框
			onShowNameEditPopup() {
				this.newAlarmName = this.alarmName // 默认填当前名称
				this.showNameEditPopup = true
			},
			// 2. 取消修改
			onCancelNameEdit() {
				this.showNameEditPopup = false
			},
			// 3. 确定修改
			async onConfirmNameEdit() {
				// 后端接口调用，假设接口为 editClock 或类似
				try {
					// 简单示例：调用 editClock 接口，或你自己定义的更新名称接口
					let paramObj = {
						id: this.alarmId,
						clockName: this.newAlarmName
					}
					const res = await editClockName(paramObj)
					console.log('修改名称响应:', res)

					// 更新前端显示
					this.alarmName = this.newAlarmName
					this.showNameEditPopup = false
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					})
				} catch (err) {
					console.error('修改名称失败:', err)
					uni.showToast({
						title: '修改失败，请重试',
						icon: 'none'
					})
				}
			},

			// 灯光开关切换
			onLightOnChange(e) {
				this.lightOn = e.detail.value
				console.log('灯光 =>', this.lightOn)
				// 调用后端API，更新灯光开关状态
				var paramObj = {
					id: this.alarmId,
					lightSwitch: this.lightOn ? 1 : 0
				}
				lightSwitch(paramObj);
			},

			// 整点播报开关切换
			onReportOnChange(e) {
				this.reportOn = e.detail.value
				console.log('整点播报 =>', this.reportOn)
				// 调用后端API，更新整点播报开关状态
				var paramObj = {
					id: this.alarmId,
					hourlyBroadcastSwitch: this.reportOn ? 1 : 0
				}
				hourlyBroadcastSwitch(paramObj);
			},

			// 亮度变更：实时调用后端接口
			onBrightnessChange(e) {
				this.brightness = e.detail.value
				console.log('亮度 =>', this.brightness)
				// 调用后端API，更新设备亮度
				var paramObj = {
					id: this.alarmId,
					brightnessSetting: this.brightness
				}
				brightnessSetting(paramObj);
			},

			// 把 #RRGGBB 转成 (R,G,B)
			parseColorToRGB(hexStr) {
				// 去掉 "#"，再分成 RRGGBB
				const hex = hexStr.replace('#', '')
				if (hex.length === 6) {
					const rHex = hex.substring(0, 2)
					const gHex = hex.substring(2, 4)
					const bHex = hex.substring(4, 6)
					this.redValue = parseInt(rHex, 16)
					this.greenValue = parseInt(gHex, 16)
					this.blueValue = parseInt(bHex, 16)
				}
			},

			// 根据 redValue / greenValue / blueValue 计算 #RRGGBB
			updateCurrentColor() {
				const r = this.redValue.toString(16).padStart(2, '0')
				const g = this.greenValue.toString(16).padStart(2, '0')
				const b = this.blueValue.toString(16).padStart(2, '0')
				this.currentColor = `#${r}${g}${b}`
				console.log('当前选中颜色 =>', this.currentColor.toUpperCase())

				// 实时调用后端 API
				const paramObj = {
					id: this.alarmId,
					colorSetting: this.currentColor.toUpperCase()
				}
				colorSetting(paramObj)
			},

			onRedChange(e) {
				this.redValue = +e.detail.value
				this.updateCurrentColor()
			},
			onGreenChange(e) {
				this.greenValue = +e.detail.value
				this.updateCurrentColor()
			},
			onBlueChange(e) {
				this.blueValue = +e.detail.value
				this.updateCurrentColor()
			},

			// 显示修改闹钟时间弹框
			onAddAlarmTime(index) {
				// 判断当前 alarmTimes 是否已到 3 个
				// if (this.alarmTimes.length >= 3) {
				// 	// 给出提示
				// 	uni.showToast({
				// 		title: '最多只能添加3个闹钟时间',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// 否则，继续添加
				// 设置弹框显示，并保存当前操作的闹钟索引
				this.showTimePopup = true;
				this.editingTimeIndex = index
				this.tempTime = this.alarmTimes[index].time || '07:00'; // 初始化临时时间为当前闹钟时间
			},
			// picker 选择的时间
			onTimeChange(e) {
				this.tempTime = e.detail.value
			},
			// 确定新增
			onConfirmAddTime() {
				// 注意，这里用 this.editingTimeIndex，而不是从参数拿 index
				if (this.editingTimeIndex === null) {
					// 万一没设置就直接 return
					return
				}

				this.alarmTimes[this.editingTimeIndex].time = this.tempTime
				// 调用后端接口
				const paramObj = {
					id: this.alarmId,
					setAlarmTime: this.alarmTimes
				}
				setAlarmTime(paramObj)

				// 关闭弹框
				this.showTimePopup = false
				this.editingTimeIndex = null

				// const value = e.detail.value
				// this.alarmTimes[index].time = this.tempTime
				// console.log(`第${index + 1}个闹钟 =>`, this.tempTime)
				// // 调用后端API，更新闹钟开关状态
				// var paramObj = {
				// 	id: this.alarmId,
				// 	setAlarmTime: this.alarmTimes
				// }
				// setAlarmTime(paramObj);
				// this.alarmTimes.push({
				// 	time: this.tempTime,
				// 	enabled: true
				// })
				// this.showTimePopup = false
				// // 调用后端API，通知设备新增一个闹钟时间
				// var paramObj = {
				// 	id: this.alarmId,
				// 	setAlarmTime: this.alarmTimes
				// }
				// setAlarmTime(paramObj);

			},
			// 取消新增
			onCancelAddTime() {
				this.showTimePopup = false
			},

			// 闹钟开关切换
			onTimeEnabledChange(index, e) {
				const value = e.detail.value
				this.alarmTimes[index].enabled = value
				console.log(`第${index + 1}个闹钟 =>`, value)
				// 调用后端API，更新闹钟开关状态
				var paramObj = {
					id: this.alarmId,
					setAlarmTime: this.alarmTimes
				}
				setAlarmTime(paramObj);
			},

			// 未知开关1切换
			onRelay1OnChange(e) {
				this.relay1On = e.detail.value
				console.log('灯光 =>', this.relay1On)
				// 调用后端API，更新灯光开关状态
				var paramObj = {
					id: this.alarmId,
					relay1Switch: this.relay1On ? 1 : 0
				}
				relay1Switch(paramObj);
			},

			// 未知开关2切换
			onRelay2OnChange(e) {
				this.relay2On = e.detail.value
				console.log('灯光 =>', this.relay2On)
				// 调用后端API，更新灯光开关状态
				var paramObj = {
					id: this.alarmId,
					relay2Switch: this.relay2On ? 1 : 0
				}
				relay2Switch(paramObj);
			},

			// 未知开关3切换
			onRelay3OnChange(e) {
				this.relay3On = e.detail.value
				console.log('灯光 =>', this.relay3On)
				// 调用后端API，更新灯光开关状态
				var paramObj = {
					id: this.alarmId,
					relay3Switch: this.relay3On ? 1 : 0
				}
				relay3Switch(paramObj);
			},

			// 电源左开关切换
			onPowerLeftOnChange(e) {
				this.powerLeftOn = e.detail.value
				console.log('灯光 =>', this.powerLeftOn)
				// 调用后端API，更新灯光开关状态
				var paramObj = {
					id: this.alarmId,
					powerSwitchLeft: this.powerLeftOn ? 1 : 0
				}
				powerSwitchLeft(paramObj);
			},

			// 电源右开关切换
			onPowerRightOnChange(e) {
				this.powerRightOn = e.detail.value
				console.log('灯光 =>', this.powerRightOn)
				// 调用后端API，更新灯光开关状态
				var paramObj = {
					id: this.alarmId,
					powerSwitchRight: this.powerRightOn ? 1 : 0
				}
				powerSwitchRight(paramObj);
			},

			// 选择城市
			onRegionChange(e) {
				// e.detail.value 形如 ["省","市","区"]
				this.regionValue = e.detail.value
				console.log("选中的地区 => ", this.regionValue)

				// 合并成完整地址（如 "广东省深圳市南山区"）
				// 或只取 city 也行，看后端需求
				const fullAddress = this.regionValue.join('')

				// 调用后端接口：把地址存储到该闹钟
				const paramObj = {
					id: this.alarmId,
					address: fullAddress
				}
				// 你可以新建一个接口，如 storeAlarmAddress(paramObj)
				// 这里直接示例 setAlarmTime，实际请改成相应的API
				// setAlarmTime(paramObj)

				// 示例：假设你新建了 storeClockAddress
				storeClockAddress(paramObj).then(res => {
					console.log("存储地址成功 => ", res)
					uni.showToast({
						title: "城市已更新",
						icon: "success"
					})
				}).catch(err => {
					console.error("存储地址失败 => ", err)
					uni.showToast({
						title: "更新地址失败",
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style>
	.detail-container {
		padding: 20px;
	}

	/* 在“设备名称”后的提示 */
	.change-name-text {
		margin-left: 6px;
		color: #999;
		/* 灰色 */
		font-size: 12px;
		/* 小一点 */
		font-style: italic;
		/* 斜体 */
		cursor: pointer;
		/* PC端预览或H5端可见鼠标指针变化 */
	}
	
	.power-text {
		margin-left: 6px;
		color: #383838;
		/* 灰色 */
		font-size: 12px;
		/* 小一点 */
		cursor: pointer;
		/* PC端预览或H5端可见鼠标指针变化 */
	}

	/* 名称修改弹框 */
	.name-edit-popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		/* 提高层级 */
	}

	.name-edit-popup-content {
		background: #fff;
		width: 80%;
		padding: 20px;
		border-radius: 6px;
	}

	.name-input {
		width: 100%;
		height: 40px;
		padding: 5px 10px;
		border: 1px solid #ccc;
		box-sizing: border-box;
		margin-bottom: 15px;
	}

	.popup-actions {
		display: flex;
		justify-content: flex-end;
		gap: 15px;
	}


	.detail-container {
		padding: 20px;
	}

	/* 隐藏原先的标题处，或通过 navigationBarTitle 显示 */
	.title {
		font-size: 18px;
		margin-bottom: 20px;
	}

	/* 每一行设置 */
	.row {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.row text {
		margin-right: 10px;
	}

	/* 设备名突出显示 */
	.device-name {
		font-weight: bold;
		color: #333;
	}

	.color-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}

	.color-item {
		width: 30px;
		/* 调小为30px */
		height: 30px;
		border-radius: 4px;
		/* 选中时的边框可用 style 动态设置或基于 class */
	}

	/* ④ 闹钟时间列表头部：右上角一个蓝色加号 */
	.alarm-time-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.alarm-time-title {
		font-size: 16px;
		font-weight: bold;
	}

	.alarm-time-add {
		color: #409eff;
		font-size: 24px;
		font-weight: bold;
		margin-right: 10px;
	}

	/* 闹钟时间列表行 */
	.alarm-time-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		background: #f9f9f9;
		padding: 8px;
		border-radius: 4px;
	}

	.alarm-time-info {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.alarm-time-label {
		font-size: 12px;
		color: #666;
		margin-left: 10px;
	}

	/* 将 switch 改小一点 */
	.small-switch {
		/* 将 0.8 改为 0.6，整体按钮更小 */
		transform: scale(0.6);
		-webkit-transform: scale(0.6);
		/* iOS兼容 */
		transform-origin: left center;
		/* 根据需要设定缩放基准点 */
		margin-right: 8px;
	}

	/* 去掉保存配置按钮 */
	/*
	.save-btn {
	  ...
	}
	*/

	/* 弹框示例 - 仅示例 */
	.time-popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.time-popup-content {
		background: #fff;
		width: 80%;
		padding: 20px;
		border-radius: 6px;
	}

	.popup-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.time-picker {
		padding: 10px;
		background: #f5f5f5;
		margin-bottom: 15px;
		text-align: center;
	}

	.popup-actions {
		display: flex;
		justify-content: flex-end;
		gap: 15px;
	}

	/* 详情：蓝色提示可点击 */
	.detail-text {
		color: #409eff;
	}

	/* 第1行：颜色设置 + 右上角颜色预览 */
	.color-setting-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	/* 标题 */
	.color-setting-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	/* 预览圆形 (在右上角) */
	.preview-circle {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 1px solid #ccc;
		/* border-radius: 6px 方圆形 */
	}

	/* 每行一个 slider */
	.rgb-slider-row {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	/* 左侧小圆点 */
	.color-dot {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		margin-right: 10px;
		border: 1px solid #ccc;
	}

	.city-picker-text {
		padding: 5px 10px;
		background: #f5f5f5;
		border-radius: 4px;
		color: #333;
	}
</style>